<template>
	<view v-if="info"  class="connect1">
		<!-- <u-navbar :is-back="true" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" :title="title"></u-navbar> -->
		<!-- <u-navbar :borderBottom="false" :custom-back="back" back-text=" " :title="title"></u-navbar> -->
		<back title="分销中心"></back>
		<!-- <view class="">
			11111
		</view> -->
		<view class="user_info1">
			<image style="width: 66rpx; height: 66rpx; border-radius: 70rpx;" :src="user_info.pic" mode=""></image>
			<span class="user_info2">{{user_info.nickname}}</span>
		</view>
		<view class="kang_index">
			<view class="kang_index_top">
				<view class="kang_index_top_left">
					<span class="kuang1"> 可提现佣金(元)</span>
					<span class="kuang3">{{info.pending_settlement_price}}</span>
				</view>
				<view class="kuang2">
					{{info.config.desc}}
				</view>
			</view>
			<view class="kang_index_top" style="margin-top: 46rpx;">
				<view class="kang_index_top_left">
					<span class="kuang1"> 已累计佣金(元)</span>
					<span class="kuang3">{{info.sum_price}}</span>
				</view>
				<view class="kang_index_top_left">
					<span class="kuang1"> 已提现佣金(元)</span>
					<span class="kuang3">{{info.approved_price}}</span>
				</view>
			</view>
			<view @click="ti_submit" class="tixian_btn">
				立即提现
			</view>
		</view>
		<!-- <view class="distribution">
			<span class="distribution_title">可提现佣金(元)</span>
			<view class="point_view">
				<span class="point_num">{{info.pending_settlement_price}}</span>
				<view class="ti_btn" @click="ti_submit">
					提现
				</view>
			</view>
		</view> -->
		<!-- <view class="all_bar">
			{{info.config.desc}}
		</view> -->
		<!-- <view class="bra_table">
			<view class="bra_table_item border_right">
				<span>已累计佣金(元)</span>
				<span class="bar_num">{{info.sum_price}}</span>
			</view>
			<view class="bra_table_item">
				<span>已提现佣金(元)</span>
				<span class="bar_num">{{info.approved_price}}</span>
			</view>
		</view> -->
		<view v-if="shenQing" @click="navTo('/pages/distribution/Apply_distribution')" class="shenQing_btn">
			<image style="width: 40rpx; height: 40rpx; margin-right: 16rpx;" src="../../static/vip/icon_51.png" mode=""></image>
			申请分销商
		</view>
		<view v-else class="type_list">
			<view v-show="item.show" v-for="(item,index) in list" :key="index" @click="navTo(item.page)" class="type_list_item">
				<view class="" style="font-size: 24rpx; display: flex; align-items: center;">
					<u-icon style="margin-right: 15rpx;font-size: 32rpx;" :name="item.icon"></u-icon>
					{{item.title}}
				</view>
				<view class="">
					<span
						style="margin-right: 15rpx; font-size: 24rpx;color: #959595;">{{item.desc?item.desc:''}}</span>
					<span
						style="font-size: 24rpx;color: #959595; font-weight: 800;margin-right: 15rpx;">{{item.num?item.num:''}}</span>
					<u-icon name="arrow-right" style="color: #ccc;"></u-icon>
				</view>
			</view>
		</view>
		<u-popup v-model="ti_show" mode="bottom" border-radius="25">
			<view class="ti_title">申请提现</view>
			<view class="form_btn">
				<u-field v-model="ti_price" type="number" @blur="input_change(ti_price , info.pending_settlement_price)"
					label="提现金额" placeholder="请输入提现金额">
				</u-field>
				<u-field v-model="name" label="姓名" placeholder="请填写真实姓名">
				</u-field>
				<u-field v-model="num" label="账号" placeholder="请输输入收款账号">
				</u-field>
				<view class="" style="padding: 25rpx;margin-top: 25vh;">
					<u-button @click="withdrawal" style="background-color: #896b51;color:#fff;" shape="circle"
						:loading="loading" :ripple="true" ripple-bg-color="#909399">申请提现</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import back from '@/componts/back.vue';
	export default {
		components: {
			back
		},
		data() {
			return {
				shenQing:false,
				style:{},
				other_uid:null,
				loading: false,
				ti_show: false,
				ti_price: '',
				name: '', //提现人
				num: '', //提现账号
				dataList: [],
				info: null,
				user_info: null,
				list: [{
						show: false,
						icon: "list",
						title: '收支明细',
						num: null,
						desc: null,
						page: '/pages/distribution/Detailed_List'
					},
					{
						show: false,
						icon: "level",
						title: '下级分销商',
						num: null,
						desc: null,
						page: '/pages/distribution/my_user_list?type=2'
					},
					{
						show: false,
						icon: "man-add",
						title: '邀请客户',
						num: null,
						desc: '邀请他人成为下级分销商,得2级佣金',
						page: '/pages/distribution/Detailed_code'
					},
					{
						show: false,
						icon: "account",
						title: '我的客户',
						num: 0,
						desc: '邀请他人成为我的客户,得1级佣金',
						page: '/pages/distribution/my_user_list?type=3'
					},
					{
						show: false,
						icon: "bell",
						title: '申请分销商',
						num: null,
						desc: '',
						page: '/pages/distribution/Apply_distribution'
					},
				]
			}
		},
		onLoad(data) {
			this.title = '分销中心'
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			// uni.setStorageSync('other_uid', data.uid)
			this.other_uid = uni.getStorageSync('other_uid')
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
			if (this.token) {
				this.$wqzApi.user_index({}).then(res => {
					this.shenQing = false
					this.user_info = res.data
					if (this.user_info.dealer_level == 1) {
						this.list.map((item,index)=>{
							if(index == 4){
								item.show = false
							}else{
								item.show = true
							}
						})
					}
					if (this.user_info.dealer_level == 2) {
						this.list.map((item,index)=>{
							if(index == 4 || index == 1 ){
								item.show = false
							}else{
								item.show = true
							}
						})
					}
					if (this.user_info.dealer_level == 0 || this.user_info.dealer_level == 3) {
						this.list.map((item,index)=>{
							if(index == 4){
								// item.show = true
								this.shenQing = true
							}
						})
					}
				})
				this.getInfo()
			} else {

				uni.setStorageSync('isModule', true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule', false)
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})

			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: '/pages/self/self'
				})
			},
			withdrawal() {
				var data = {
					"price": this.ti_price,
					"name": this.name,
					"num": this.num
				}
				if (this.num <= 0) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return
				}
				this.loading = true
				this.$wqzApi.UserDealer_withdrawal(data).then(res => {
					uni.showToast({
						title: '申请成功',
						icon: 'none'
					})
					this.loading = false
					this.ti_show = false
					this.getInfo()

				}).catch(err => {
					this.loading = false
				})
			},
			input_change(value, max) {
				value = this.$geShi(value)
				if (value > max) {
					this.ti_price = max
				} else {
					this.ti_price = value
				}
			},
			ti_submit() {
				// 申请提现
				if(this.user_info.dealer_level == 1 || this.user_info.dealer_level == 2){
					this.ti_show = true
				}else{
					uni.showToast({
						title:'暂未成为分销商',
						icon:'none'
					})
				}
				
			},
			getInfo() {
				var data = {}
				this.$wqzApi.UserDealer_user_detail(data).then(res => {
					console.log(res)
					this.info = res.data
					this.list[3].num = this.info.user2
					this.list[1].num = this.info.user1
					this.ti_price = Number(this.info.pending_settlement_price)
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url(./distribution.css);
</style>